<!-- 评价管理界面 -->
<template>
  <div id="tp">
  <div id="hezi">
   <h2>贪吃蛇</h2>
   <img src="https://img0.baidu.com/it/u=633559270,3828990747&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256" width="128" height="128" />
   <div img="https://img0.baidu.com/it/u=633559270,3828990747&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256"></div>
 
   <input v-model="newComment" placeholder="添加评论">
   &nbsp;&nbsp;<el-button @click="addComment" type="primary" size="mini">添加</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ><router-link to="/game">返回</router-link></button><br><br>
   <div id="hezi">
    <div id="xhz" v-for="(comment, index) in comments" :key="index">
      
      &nbsp;&nbsp;{{  comment }}
      &nbsp;&nbsp;<button @click="removeComment(index)">删除</button>
    </div>
  </div>
  
  </div>
</div>
</template>
 
<script>
export default {
  data() {
    return {
      comments: ['     简单', '     有趣', '     good'],
      newComment: ''
    };
  },
  methods: {
    addComment() {
      if (this.newComment.trim()) {
        this.comments.push(this.newComment.trim());
        this.newComment = '';
      }
    },
    removeComment(index) {
      this.comments.splice(index, 1);
    }
  }
};
</script>




<style>
#tp{
  position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* 渐变 */
    background-image: url("/src/views/photo/login.jpg");
}
  #hezi{
border: 1px solid;
background-color: rgba(255, 255, 255, 0.35);
height: 600px;
width: 1000px;
  }


  #xhz{
   border-top: 5px;
   position: relative;
    border: 1px solid;
    background-color: rgba(255, 255, 255, 0.35);
    height: 40px;
    width: 1000px;
      }
      #xxh{
       
         border: 1px solid;
         background-color: rgba(255, 255, 255, 0.35);
         height: 40px;
         width: 500px;
         
           }
</style>